<template>
   <div style="width:450px;height:350px;border:1px solid #ccc;margin:10px" ref="main"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data(){
        return{
            ydata:[34,43,156,178,21,11]
        }
    },
    computed:{
        options(){
            return{
                xAxis:{
                   
                },
                yAxis:{
                     data:['1月份','2月份','3月份','4月份','5月份','6月份']
                },
                series:[
                    {
                        type:'bar',
                        data:this.ydata,
                        markPoint:{
                            data:[
                                {
                                    type:'max',name:'最大值'
                                },
                                {
                                    type:'min',name:'最小值'
                                }
                            ]
                        },
                        markLine:{
                            data:[
                               {
                                 type:'average',name:'平均值'
                               }
                            ]
                        },
                        itemStyle:{
                            color:'skyblue',
                            shadowBlur:15,
                            shadowOffsetX:15,
                            opacity:.4,
                        },
                        barWidth:25
                        /*
                        label:{
                            show:true,
                            color:'red',
                            backgroundColor:'yellow',
                            width:20,
                            height:20,
                            borderWidth:3,
                            borderColor:'black'
                        }*/
                    }
                ]
            }
        }
    },
    mounted(){
        const mychart=echarts.init(this.$refs.main)
        mychart.setOption(this.options)
    }
}  
</script>

<style>

</style>